<template>
  <up-popup :show="dialogVisible" :overlayStyle="{ background: 'transparent' }" class="chatPopup"
    bgColor="rgba(255, 255, 255, 0.67)" @close="handleClosePopup">
    <view class="chatContainer">
      <scroll-view class="chatBox" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true"
        scroll-id="chatScrollView">
        <view class="processCard">
          <view class="cardTitle">只需如下几步就能把保单上传过来哟</view>
          <view class="cardMain">
            <view class="process">
              <image src="../static/images/icon/download.svg"></image>
              <view>下载APP</view>
            </view>
            <view class="arrowRight"></view>
            <view class="process">
              <image src="../static/images/icon/download.svg"></image>
              <view>注册并查看</view>
            </view>
            <view class="arrowRight"></view>
            <view class="process">
              <image src="../static/images/icon/download.svg"></image>
              <view>下载并上传</view>
            </view>
          </view>
        </view>
        <view class="problemCard">
          <view class="problemItem" v-for="(item, i) in problemList" :key="i">
            {{ item.name }}
          </view>
        </view>
        <view class="processCard">
          <view class="cardTitle">金事通查保单</view>
          <view class="cardMain">
            <view class="process">
              <image src="../static/images/icon/download.svg"></image>
              <view>下载APP</view>
            </view>
            <view class="arrowRight"></view>
            <view class="process">
              <image src="../static/images/icon/download.svg"></image>
              <view>注册并查看</view>
            </view>
          </view>
        </view>
        <!-- 聊天过程 -->
        <template v-for="(item, index) in chatList" :key="index">
          <view class="info" v-if="item.location === 'left'">
            <image :src="item.img"></image>
            <view class="messageText">{{ item.text }}</view>
          </view>
          <view class="rightInfo info" v-if="item.location === 'right'">
            <view class="messageText">{{ item.text }}</view>
            <image :src="item.img" v-if="item.img"></image>
          </view>
        </template>
        <!-- 底部占位元素，用于滚动定位 -->
        <view id="bottom-anchor" class="bottom-anchor"></view>
      </scroll-view>
    </view>
  </up-popup>
</template>

<script setup>
import aiThink from '../static/images/aiThink.png'
import { watch, ref, getCurrentInstance, nextTick, toRefs, computed } from 'vue';
const popupShow = ref(false);
const scrollTop = ref(0);
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 聊天框
  chatPopupShow: {
    type: Boolean,
    default: false
  }
})
const { chatPopupShow } = toRefs(props);
const emit = defineEmits(['update:chatPopupShow']);

// 使用计算属性建立双向绑定
const dialogVisible = computed({
  get: () => chatPopupShow.value,
  set: (val) => emit('update:chatPopupShow', val)
});

// 常见问题
const problemList = ref([
  { name: '2222', name: '22222' }
])
// 聊天框
const chatList = ref([
  { text: '11111111', img: aiThink, location: 'left', timestamp: Date.now() },
  { text: '11111111', img: '', location: 'right', timestamp: Date.now() + 1000 },
])

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick();
  // 使用一个较大的值确保滚动到最底部
  scrollTop.value = scrollTop.value === 99999 ? 99998 : 99999;
}

// 获取模态框的显示隐藏
watch(chatPopupShow, (nv) => {
  if (nv) {
    // 打开时滚动到底部
    setTimeout(() => {
      scrollToBottom();
    }, 100);
  }
}, { immediate: true, deep: true });

// 最新消息的显示和隐藏
watch(() => proxy.$store.state.newMessage, (nv) => {
  if (nv) {
    // 添加用户消息
    let userMessage = {
      text: nv,
      location: 'right',
      img: '',
      timestamp: Date.now()
    };
    chatList.value.push(userMessage);

    // 滚动到底部
    scrollToBottom();

    // 模拟AI回复
    setTimeout(() => {
      let aiMessage = {
        text: 'AI解析中...',
        img: aiThink,
        location: 'left',
        timestamp: Date.now()
      };
      chatList.value.push(aiMessage);
      scrollToBottom();

      // 模拟AI真实回复
      setTimeout(() => {
        // 替换最后一条AI消息
        const lastIndex = chatList.value.length - 1;
        chatList.value[lastIndex] = {
          text: '我已经收到您的消息，正在为您分析...',
          img: aiThink,
          location: 'left',
          timestamp: Date.now()
        };
        scrollToBottom();
      }, 2000);
    }, 1000);

    // 清空store中的消息
    proxy.$store.commit('HANDLE_NEW_MESSAGE', '');
  }
}, { immediate: true, deep: true });

// 关闭模态框
const handleClosePopup = () => {
  emit('update:chatPopupShow', false);
}
</script>

<style lang='scss' scoped>
.chatContainer {
  display: flex;
  height: 1100rpx;
  flex-direction: column;
}

.chatBox {
  flex: 1;
  overflow-y: auto;

  // 步骤卡片
  .processCard {
    overflow: hidden;
    border-radius: 34rpx;
    margin-bottom: 38rpx;

    .cardTitle {
      padding: 24rpx 0;
      font-weight: 500;
      color: #3E3838;
      text-align: center;
      background: linear-gradient(94deg, rgba(237, 218, 197, 0.93) 0%, rgba(234, 204, 162, 0.93) 78.38%);
    }

    // 步骤内容
    .cardMain {
      display: flex;
      align-items: center;
      background-color: #FFF;
      padding: 8rpx 50rpx 22rpx;

      // 步骤
      .process {
        text-align: center;

        image {
          width: 80rpx;
          height: 80rpx;
        }

        view {
          font-size: 24rpx;
          font-weight: 500;
          color: #3E3C3C;
        }
      }

      // 间隔箭头
      .arrowRight {
        height: 2px;
        flex-grow: 1;
        margin: 0 28rpx;
        position: relative;
        display: inline-block;
        background-color: #B6B6B6;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          width: 8px;
          height: 8px;
          background-color: #B6B6B6;
          transform: translateY(-50%);
          border-top: 2px solid #B6B6B6;
          border-right: 2px solid #B6B6B6;
          transform: translateY(-50%) rotate(45deg);
        }
      }
    }
  }

  // 常见问题
  .problemCard {
    padding: 18rpx 22rpx;
    border-radius: 24rpx;
    margin-bottom: 38rpx;
    background-color: #FFF;

    .problemItem {
      padding: 18rpx 0;
      font-size: 24rpx;
      border-bottom: 1px solid #F8F8F8;

      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }

      &:first-child {
        padding-top: 0;
      }
    }
  }

  // 消息框
  .info {
    display: flex;
    max-width: 60%;
    padding: 16rpx 20rpx;
    border-radius: 28rpx;
    margin-bottom: 24rpx;
    word-wrap: break-word;
    align-items: flex-start;
    background-color: #F4F3F3;


    &:first-child {
      margin-top: 0;
    }

    .messageText {
      flex: 1;
      color: #333;
      line-height: 40rpx;
    }

    image {
      width: 62rpx;
      height: 62rpx;
      flex-shrink: 0;
      border-radius: 31rpx;

      &:first-child {
        margin-right: 16rpx;
      }

      &:last-child {
        margin-left: 16rpx;
      }
    }
  }

  // 右侧的我的信息
  .rightInfo {
    margin-left: auto;
  }

  // 底部站位元素
  .bottom-anchor {
    height: 20rpx;
    width: 100%;
  }
}
</style>
